<!-- Front page for Marketplace -->
<!DOCTYPE HTML>
<html>
  <head>
    <title>Movie DB</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="script/jquery-1.9.1.min.js"> </script>
    <script src="bootstrap/js/bootstrap.min.js"> </script>
    <script src="script/jquery.validate.js"> </script>

    

    <style type="text/css">
      .header {
        margin-top:20px;
      }

      #front-search-form {
        padding-top: 10px;
        border-style: solid;
        border-width: 2px;
      }
     
    </style>
    <script>
      function loadLoginModal() {
        $("#loginModal").modal();
      }

      function loadSignupModal(){
        $("#signupModal").modal();
      }

      $(document).ready(function() {
       
      });

      

    </script>
  </head>
  <body>
    <div class="container">
      <!--marketplace banner photo -->
      <div class="header row-fluid">
        <div class="span7">
          <h1>Online Movie Rental System
            <small> CS2102 </small>
          </h1>
        </div>
        <div clas="span5">
            <div class="btn-group pull-right" style="margin-top:20px">
              <a class="btn btn-success" onclick="loadLoginModal(); return false;"> Log in </a>  
              <a class="btn" onclick="loadSignupModal(); return false;"> register </a>  
            </div>
          
        </div>
      </div>

      <div class="navbar">
        <div class="navbar-inner">
          <a class="brand" href="#">MOVIES!</a>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div>
      </div>


      <!-- signin form -->

      <div class="row-fluid">
        <div class="span5 front-search">
            <form class="form-horizontal" id="front-search-form">
              <div class="control-group">
                <label class="control-label" for="title">Title</label>
                <div class="controls">
                  <input type="text" id="title" placeholder="Movie Title">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                  <input id="inputPassword" placeholder="Password">
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <label class="checkbox">
                    <input type="checkbox"> Remember me
                  </label>
                  <button type="submit" class="btn">Sign in</button>
                </div>
              </div>
            </form>
        </div>


        <!-- Top Records -->
        <div class="span7 front-top">
        </div>
      </div>
     
    </div>


    <!-- sign up form modal -->
    <div class="modal hide fade" id="signupModal">
       <form action="register.php" method="post" class="form-horizontal" id="signup-form" style="margin-bottom:0px">
     
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Sign up</h3>
      </div>
      <div class="modal-body">
              <div class="control-group">
                <label class="control-label" for="name" >Username</label>
                <div class="controls">
                  <input type="text" id="name" name="name"required placeholder="your username?">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="email">email</label>
                <div class="controls">
                  <input type="email" id="email" required name="email" placeholder="your email address?">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="address">address</label>
                <div class="controls">
                  <input type="text" id="address" name="address" required placeholder="your address?">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="telephone">telephone</label>
                <div class="controls">
                  <input type="text" id="telephone" required name="telephone" placeholder="your telephone number?">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                  <input id="inputPassword" required name="password" type="password"  placeholder="Password">
                </div>
              </div>
              <!--
              <div class="control-group">
                <label class="control-label" for="inputPassword2">Confirm Password</label>
                <div class="controls">
                  <input id="inputPassword2" required type="password" placeholder="Please enter again">
                </div>
              </div>
              -->
      </div>
 
      <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button type="submit" class="btn btn-primary">Register</button>
      </div>
 
     </form>
    </div>


    <!-- login modal -->
    <div class="modal hide fade" id="loginModal">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Log in</h3>
      </div>
       <form action="login.php" method="post" class="form-horizontal" id="login-form" style="margin-bottom:0px">
      <div class="modal-body">
          <div class="control-group">
            <label class="control-label" for="email">email</label>
            <div class="controls">
              <input type="email" id="email" required name="email" placeholder="your email address?">
            </div>
          </div>

          <div class="control-group">
            <label class="control-label" for="inputPassword">Password</label>
            <div class="controls">
              <input id="inputPassword" required name="password" type="password"  placeholder="Password">
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button type="submit" class="btn btn-primary">Log in</button>
      </div>
    </div>


  </body>
</html>
